<template>
  <div class="articleColumn">
    <div class="scroll"
         ref="wrapper"
         :data="articleList">
      <div>
        <nav-list :navList="navList" @changeNav="changeList"></nav-list>
        <a-swiper :list="swiper" v-show="nid == 0"></a-swiper>
        <div class="grp">
          <article-list :articleList="articleList"></article-list>
        </div>
        <div class="load" v-if="articleList.length > 10 " v-show="!loading && !noData">加载更多</div>
        <div class="load" v-show="loading && !noData">
          加载中...
        </div>
        <div class="load" v-if="noData">
          无更多内容
        </div>
      </div>
    </div>
    <waiting v-if="!articleList.length"></waiting>
  </div>
</template>

<script>
  import Bscroll from 'better-scroll'
  import ASwiper from 'components/swiper/swiper'
  import ArticleList from 'components/articleList/articleList'
  import NavList from 'components/navList/navList'
  import Waiting from 'components/loading/loading'
  import {getArticleList, getArticleNav, getSlider} from "../../api/api";


  export default {
    name: 'ArticleColumn',
    watch: {},
    computed: {
      data() {
        return this.swiper[this.index]
      }
    },
    data() {
      return {
        isAutoPlay: true,
        isLoop: true,
        isShowDot: true,
        speed: 300,
        threshold: 0.3,
        interval: 3000,
        navList: [],
        swiper: [],
        articleList: [],
        offset: 0,
        pageSize: 10,
        nid: 0,
        loading: false,
        noData: false,
        index: 0,
      }
    },
    mounted() {
      this.getArticleColumnInfo()
      this.scroll = new Bscroll(this.$refs.wrapper, {
        click: true,
        pullUpLoad: {
          threshold: -70
        }
      })
      this.scroll.on("pullingUp", function () {

        this.loading = true
        let _this = this

        setTimeout(function () {
          _this.axios.all([_this._getArticleList()]).then(_this.axios.spread((acct) => {
            acct = acct.data
            if (acct.data) {
              if (acct.data.length < this.pageSize) {
                this.noData = true
              }
              _this.offset = _this.pageSize + _this.offset
              let newPage = acct.data
              _this.articleList = _this.articleList.concat(newPage)
            }
          }))
          _this.$nextTick(function () {
            _this.loading = false
            _this.scroll.finishPullUp()
            _this.scroll.refresh()
          })
        }.bind(this), 700)
      }.bind(this))
    },
    components: {
      ASwiper,
      ArticleList,
      NavList,
      Waiting
    },
    methods: {

      getArticleColumnInfo() {
        this.axios.all([this._getArticleList(), this.getNav(), getSlider(3)]).then(this.axios.spread((atl, nav, sld) => {
          atl = atl.data
          nav = nav.data
          sld = sld.data
          if (atl.data && nav.data && sld.data) {
            this.articleList = atl.data
            this.navList = nav.data
            this.swiper = sld.data
          }
        }))
      },

      changeList(id) {
        this.nid = id
        this.offset = 0
        this.noData = false
        this.axios.all([this._getArticleList()]).then(this.axios.spread((acct) => {
          acct = acct.data
          if (acct.data) {
            this.offset = this.pageSize + this.offset
            this.articleList = acct.data
          }
        }))
      },

      getNav() {
        return getArticleNav()
      },
      _getArticleList() {
        let nid = this.nid
        let offset = this.offset
        let pageSize = this.pageSize
        return getArticleList(nid, offset, pageSize)

      },

    }
  }
</script>

<style scoped>
  .scroll {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  }

  .grp {
    padding: 20px 26px;
  }

  .load {
    height: 100px;
    width: 100%;
    text-align: center;
    font-size: 28px;
    color: #333;
  }
</style>
